<template>
    <div class="stars">
        <span v-for="item in 3" :key="item" :style="getRotateZ(item)"></span>
    </div>
</template>
<script>
export default {
    name: "StarsStars",
    methods: {
        getRotateZ(index) {
            return `transform: rotateZ(${(index - 1) * 60}deg);`
        }
    }
}
</script>
<style lang="scss" scoped>
.stars {
    position: relative;
    width: 10px;
    height: 10px;

    span {
        width: 5px;
        height: 1px;
        left: 50%;
        top: 50%;
        background-color: #f82421;
        position: absolute;
        margin-top: -0.5px;
        margin-left: -2.5px;
    }
}
</style>